<template>
  <el-dialog
    :visible="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    title="Add Demo Operator"
    width="40%"
  >
    <div>
      <el-form
        :model="dataForm"
        :rules="dataRule"
        size="small"
        label-position="right"
        ref="dataForm"
        label-width="150px"
        v-loading="dataListLoading"
      >
        <el-form-item :label="$t('operator.contactName')" prop="contactName">
          <el-input
            v-model="dataForm.contactName"
            maxlength="32"
            @blur="() => (dataForm.contactName = dataForm.contactName.trim())"
            placeholder="Contactname"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('operator.email')" prop="email">
          <el-input
            v-model="dataForm.email"
            maxlength="128"
            placeholder="E-mail"
            show-word-limit
            clearable
            @blur="() => (dataForm.email = dataForm.email.trim())"
          />
        </el-form-item>
        <el-form-item :label="$t('operator.level')" prop="levelCode">
          <el-select
            v-model="dataForm.levelCode"
            prop="levelCode"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in levelList"
              :key="item.levelCode"
              :value="item.levelCode"
              :label="item.levelName"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('operator.mapType')" prop="mapType">
          <el-select
            v-model="dataForm.mapType"
            @change="mapSelect"
            style="width: 100%"
          >
            <el-option
              v-for="item in mapList"
              :key="item.mapType"
              :value="item.mapType"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('operator.mapKey')" prop="mapKey">
          <div>
            <el-radio
              v-model="radio"
              label="1"
              size="small"
              style="cursor: pointer; margin-right: 10px"
              >{{ $t('operator.defaulTag') }}</el-radio
            >
          </div>
          <div>
            <el-radio v-model="radio" label="2">
              <el-input
                placeholder="key"
                v-model="dataForm.mapKey"
                @blur="() => (dataForm.mapKey = dataForm.mapKey.trim())"
                maxlength="128"
                show-word-limit
                clearable
              >
              </el-input>
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item :label="$t('common.remark')" prop="remark">
          <el-input
            v-model="dataForm.remark"
            @blur="() => (dataForm.remark = dataForm.remark.trim())"
            maxlength="256"
            :placeholder="$t('common.remark')"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="visible = false">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="dataListLoading"
          @click="dataFormSubmit()"
          >{{ $t('common.confirm') }}</el-button
        >
      </span></template
    >
  </el-dialog>
</template>


<script>
import { systemRegisterDemoOperator } from '@/api/operator'
import countryJson from '@/assets/static/country.json'
import { getMapList } from '@/utils'
import { getSystemMenuList } from '@/api/system-menu'
export default {
  data() {
    const validateLevelcode = (rule, value, callback) => {
      if (!value || value.length < 1) {
        callback(new Error(this.$t('operator.levelcode_tip')))
      } else {
        callback()
      }
    }
    return {
      levelList: [],
      visible: false,
      dataListLoading: false,
      clickDisabled: true,
      countryData: countryJson,
      dataForm: {
        contactName: '',
        levelCode: '',
        mapType: 'MAP_BOX',
        mapKey: '',
        remark: '',
        email: '',
        isDefaultMapKey: false
      },
      radio: '1',
      id: null,
      cmdTypeCodeList: [],
      mapList: [],
      dataRule: {
        contactName: [
          {
            required: true,
            message: this.$t('common.nullInputTip'),
            trigger: 'change'
          }
        ],
        // mapKey: [
        //   {
        //     required: true,
        //     message: this.$t('common.nullInputTip'),
        //     trigger: 'change'
        //   }
        // ],
        levelCode: [
          { required: true, trigger: 'manual', validator: validateLevelcode }
        ],
        email: [
          {
            type: 'email',
            message: this.$t('common.email_format_error'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    init() {
      this.mapList = getMapList()
      this.getLevelInfo()
      this.visible = true
      this.dataListLoading = false
    },
    getLevelInfo() {
      let params = {
        characterCode: '',
        levelCode: '',
        pageNo: 1,
        pageSize: 100
      }
      getSystemMenuList(params)
        .then((res) => {
          this.levelList = res.data
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    mapSelect() {
      this.dataForm.mapKey = ''
    },
    defaultKeyClick() {
      console.log(this.mapList)
      if (this.dataForm.mapType === 'MAP_BOX') {
        this.dataForm.mapKey = this.mapList[0].mapKey
      } else if (this.dataForm.mapType === 'GOOGLE') {
        this.dataForm.mapKey = this.mapList[1].mapKey
      } else if (this.dataForm.mapType === 'BAIDU') {
        this.dataForm.mapKey = this.mapList[2].mapKey
      }
    },
    dataFormSubmit() {
      if (this.radio === '2' && this.dataForm.mapKey === '') {
        this.$confirm(this.$t('operator.map_not_null'), this.$t('page.tip'), {
          confirmButtonText: this.$t('page.confirm'),
          cancelButtonText: this.$t('page.cancel'),
          type: 'warning'
        })
        return
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataListLoading = true
          if (this.radio === '1') {
            this.dataForm.isDefaultMapKey = true
            this.dataForm.mapKey = null
          } else {
            this.dataForm.isDefaultMapKey = false
          }
          systemRegisterDemoOperator(this.dataForm)
            .then((data) => {
              this.dataListLoading = false
              console.log(data)
              this.visible = false
              this.$emit('refreshDataList')
            })
            .catch((e) => {
              this.$confirmError(e)
              this.dataListLoading = false
              this.$emit('refreshDataList')
              this.handleClose()
            })
        }
      })
    },
    handleClose() {
      this.visible = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 25px;
  width: 90%;
}
</style>
